<script setup lang="ts">
import DisplayComponent from '@/layouts/DisplayComponent.vue';

const rawHtml = `
<template>
    <vi-carousel>
      <div class="item" v-for="(item, index) in 5" :key="index">
        <img class="w-full h-full object-cover" :src="\`https://picsum.photos/800/400?random=\${index}\`" alt="" />
    </div>
  </vi-carousel>
</template>
`
</script>

<template>
  <DisplayComponent :rawHtml="rawHtml">
    <vi-carousel>
      <div class="item" v-for="(item, index) in 5" :key="index">
        <img class="w-full h-full object-cover" :src="`https://picsum.photos/800/400?random=${index}`" alt="" />
      </div>
    </vi-carousel>
  </DisplayComponent>


</template>

<style scoped></style>
